<template>
  <div class="visitorpie">
    <div id="visitorpie" class style="width: 90%;height:450px;"></div>
  </div>
</template>

<script>
var echarts = require('echarts');
import API from '@/api'
export default {
  mounted() {
    this.myChart = echarts.init(document.getElementById("visitorpie"));
    this.initData();
    setInterval(() => {
      API.geDate().then(res => {
      let arr = []
      for (const key in res) {
        arr.push(res[key]);
      }
      this.initData(arr)
    })
    }, 3000);
  },
  methods: {
    initData(arr) {
      var option = {
            title: {
                text: '第八届广东文艺职业学院美术系班服大赛最佳人气榜'
            },
            tooltip: {},
            legend: {
                data:['票数']
            },
            xAxis: {
                data: ["18会展班","18工艺班","18计美1班","18计美2班","18配饰班","18陶艺班"]
            },
            yAxis: {},
            series: [{
                name: '票数',
                type: 'bar',
                data: arr
            }]
        };

      this.myChart.setOption(option);
    }
  }
};
</script>

<style lang="less">
@import "../assets/styles/mixin.less";
.visitorpie {
  .fj("centeer");
  margin-top: 20px;
}
</style>
